/* 部门管理页面 */
<template>
  <div>
    <!-- 用户列表主体部分 -->
    <el-card>
      <el-row :gutter="25">
        <!--间隙  -->
        <!-- 搜索区域 -->
        <!-- 搜索添加 -->
        <el-col :span="10"
          ><!-- 列宽 -->
          <el-input placeholder="请输入搜索内容" clearable>
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>

        <el-col :span="4">
          <!-- 添加用户按钮 -->
          <el-button type="primary" @click="addDialogVisible = true"
            >添加用户</el-button
          >
        </el-col>
      </el-row>

      <!-- 用户列表 ,border为边框，stripe隔行变色 -->
      <el-table
        :data="departList"
        border
        stripe
        style="box-shadow: 10px 10px 5px rgba(99, 99, 153, 0.2)"
        :header-cell-style="{ background: '#f8f8f9', color: '#515a6e' }"
      >
        <el-table-column type="index"></el-table-column>
        <el-table-column label="部门名" prop="name"></el-table-column>
        <el-table-column label="状态" prop="state">
          <!-- 作用域操作 -->
          <template slot-scope="scope">
            <!--   {{ scope.row }}每一行封存的数据 -->
            <el-switch v-model="scope.row.state"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template>
            <!-- 修改 -->
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
            ></el-button>
            <!-- 删除 -->
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
            ></el-button>
            <!-- 权限 -->
          </template>
        </el-table-column>
        <!-- 索引列 -->
      </el-table>

      <!-- size-change:每页条数 -->
      <div class="block" style="text-align: center; margin-top: 15px">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="fromData.pageIndex"
          :page-sizes="pageInfo.pageSizes"
          :page-size="fromData.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageInfo.total"
        >
          <!-- @size-change：每页显示条数个数点击事件，当切换时动态的切换每页显示的条数
               @current-change：当前页数点击事件
               current-page:当前页码，默认为第一页
               page-sizes：在页面可选择的页码数[1,10,20,50] 
               page-size：每页显示的条数，可以动态的修改
               total：显示的是从后端获得数据的总数  -->
        </el-pagination>
      </div>
    </el-card>
    <!-- 新增用户区域 -->
  </div>
</template>

<script>
export default {
  //created()方法指的是在页面开启的同时就调用里面的方法。
  created() {
    this.getEmptList();
  },
  //数据定义
  data() {
    return {
      departList: [],
      //查询信息封装实体
      fromData: {
        name: "",
        pageIndex: 1, //当前页码，为第一页
        pageSize: 10, //默认每页最大数为10，可以动态的切换每页最大数
      },
      pageInfo: {
        total: 0, //总数，初始值为0
        pageSizes: [1, 5, 10, 20], //定义每次显示最大的条数
      },
    };
  },
  methods: {
    //获取所有部门，通过http请求的get方法调用后端的接口方法
    async getEmptList() {
      const { data: res } = await this.$http.get(
        "http://localhost:9006/sys/dept/list",
        {
          params: this.fromData,
        }
      );
      if (res.code != 200) {
        this.$message.error("操作失败1");
      }

      this.departList = res.data.list; //对用户列表数据封装
      this.pageInfo.total = res.data.total; //总用户数封装，number指的是后台的""number"属性名
    },

    //每页显示的条目个数，val为参数
    handleSizeChange(val) {
      this.fromData.pageSize = val;
      this.getEmptList(); //获取当前用户列表
    },
    //当前页数
    handleCurrentChange(val) {
      this.fromData.pageIndex = val;
      this.getEmptList(); //获取当前用户列表
    },
  },
};
</script>

<style Lang="less" scoped>
/* 面包屑样式 */
.el-breadcrumb {
  margin-bottom: 15px;
  font-size: 17px;
}
</style>